<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" 
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>餐饮网站-轮播广告模块-俞健澄</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
    .pic{
    margin: 0 auto;
    width: 800px;
    padding: 20px;
}
.carousel {
    background: white;
}
@media (max-width:992px) {
    .pic{
        width: 415px;
    }
}
    </style>
	</head>
	<body>
		<!--轮播广告-->
<div class="container hidden-xs" >
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner ">
            <div class="item active">
                <div class="pic">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                </div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left  " href="#myCarousel" role="button " data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right " href="#myCarousel" role="button" data-slide="next">&rsaquo;</a>
        <!--轮播计数器-->
         <ol class="carousel-indicators">
		 	<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
		 	<li data-target="#myCarousel" data-slide-to="1"></li>
		 	<li data-target="#myCarousel" data-slide-to="3"></li>
		 	<li data-target="#myCarousel" data-slide-to="4"></li>
		 	<li data-target="#myCarousel" data-slide-to="5"></li>
		 	<li data-target="#myCarousel" data-slide-to="6"></li>
		 	<li data-target="#myCarousel" data-slide-to="7"></li>
		 </ol>
    </div>
</div>
<!--轮播广告结束-->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>
